/*
* ZEN - HTML5-CSS3 Audio Player
* Author: simurai (simurai.com)
*
*/


/* player */

#zen .player {
/* With display: none; it doesn't work on iOS, below an alternative */
position: absolute;
width: 0;
height: 0;
}


#zen:before {
content: "";
position: absolute;
display: inline-block;
z-index: -1;
border-radius: 100px;
width: 150px;
height: 150px;
margin: -25px 0 0 -25px;

/*background: hsla(0,0%,0%,.05); 
background: -webkit-gradient(radial, center top, 150, center top, 0, from(hsla(0,0%,100%,.5)), to(hsla(0,0%,50%,.1)));  
background: -webkit-radial-gradient(50% 0 180deg, circle farthest-side, hsla(0,0%,50%,.05), hsla(0,0%,100%,.4) );
background: -moz-radial-gradient(50% 0 180deg, circle farthest-side, hsla(0,0%,50%,.05), hsla(0,0%,100%,.4) );
background: -ms-radial-gradient(50% 0 180deg, circle farthest-side, hsla(0,0%,50%,.05), hsla(0,0%,100%,.4) );
background: -o-radial-gradient(50% 0 180deg, circle farthest-side, hsla(0,0%,50%,.05), hsla(0,0%,100%,.4) );
background: radial-gradient(50% 0 180deg, circle farthest-side, hsla(0,0%,50%,.05), hsla(0,0%,100%,.4) );*/
}
#zen {
display: inline-block;
position: relative;
padding: 2px;
border-radius: 100px;
width: 100px;
height: 100px;
background-color: #000;
-webkit-box-shadow: rgba(255,255,255,.8) 0 2px 3px, rgba(0,0,0,.5) 0 -1px 2px;
box-shadow: rgba(255,255,255,.8) 0 2px 3px, rgba(0,0,0,.5) 0 -1px 2px;
text-align: left; /*Fix for Chrome/FF*/
}
#zen.play {
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: -ms-grab;
cursor: -o-grab;
cursor: grab;
}
#zen.play:active {
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: -ms-grabbing;
cursor: -o-grabbing;
cursor: grabbing;
}




/* button */

#zen .button {  
position: absolute;
display: inline-block;
border: none;
border-radius: 50px;
width: 100px;
height: 100px;

cursor: pointer;

background: hsla(0,0%,50%,1); /* fallback */
background: #000 -webkit-gradient(radial, center top, 200, center top, 20, from(hsla(0,0%,100%,0)), to(hsla(0,0%,100%,.65))); 
background: #000 -webkit-radial-gradient(50% 0 180deg, circle farthest-side, rgba(255, 255, 255, 0.65) 20%, rgba(255, 255, 255, .35) 100%);
background: #000 -moz-radial-gradient(50% 0 180deg, circle farthest-side, rgba(255, 255, 255, 0.65) 20%, rgba(255, 255, 255, .35) 100%);
background: #000 -ms-radial-gradient(50% 0 180deg, circle farthest-side, rgba(255, 255, 255, 0.65) 20%, rgba(255, 255, 255, .35) 100%);
background: #000 -o-radial-gradient(50% 0 180deg, circle farthest-side, rgba(255, 255, 255, 0.65) 20%, rgba(255, 255, 255, .35) 100%);
background: #000 radial-gradient(50% 0 180deg, circle farthest-side, rgba(255, 255, 255, 0.65) 20%, rgba(255, 255, 255, .35) 100%);

-webkit-box-shadow: inset rgba(0,0,0,0.2) 0 -3px 4px 1px, inset rgba(252,255,255,0.4) 0 2px 8px 0px, rgba(0,0,0,.8) 0 3px 8px -1px;
box-shadow: inset rgba(0,0,0,0.2) 0 -3px 4px 1px, inset rgba(252,255,255,0.4) 0 2px 8px 0px, rgba(0,0,0,.8) 0 3px 8px -1px;

-webkit-transition: -webkit-transform .3s cubic-bezier(0,.5,.5,1), -webkit-border-radius .2s cubic-bezier(0,.5,0,1);  
-moz-transition: -moz-transform .3s cubic-bezier(0,.5,.5,1), -moz-border-radius .2s cubic-bezier(0,.5,0,1); 
-ms-transition: -ms-transform .3s cubic-bezier(0,.5,.5,1), -ms-border-radius .2s cubic-bezier(0,.5,0,1);  
-o-transition: -o-transform .3s cubic-bezier(0,.5,.5,1), -o-border-radius .2s cubic-bezier(0,.5,0,1); 
transition: transform .3s cubic-bezier(0,.5,.5,1), border-radius .2s cubic-bezier(0,.5,0,1);
}


#zen .button:active, #zen.play .button {
-webkit-transform: scale(.5);
-moz-transform: scale(.5);
-ms-transform: scale(.5);
-o-transform: scale(.5);
transform: scale(.5);

background: hsla(0,0%,40%,1); /* fallback */
background: #000 -webkit-gradient(radial, center top, 200, center top, 20, from(hsla(0,0%,100%,0)), to(hsla(0,0%,100%,.48))); 
background: #000 -webkit-radial-gradient(50% 0 180deg, circle farthest-side, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, .28) 100%);
background: #000 -moz-radial-gradient(50% 0 180deg, circle farthest-side, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, .28) 100%);
background: #000 -ms-radial-gradient(50% 0 180deg, circle farthest-side, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, .28) 100%);
background: #000 -o-radial-gradient(50% 0 180deg, circle farthest-side, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, .28) 100%);
background: #000 radial-gradient(50% 0 180deg, circle farthest-side, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, .28) 100%);

-webkit-box-shadow: inset rgba(0,0,0,0.5) 0 -4px 4px 1px, inset rgba(252,255,255,0.2) 0 6px 4px -2px, rgba(0,0,0,.6) 0 4px 4px 1px; 
box-shadow: inset rgba(0,0,0,0.5) 0 -4px 4px 1px, inset rgba(252,255,255,0.2) 0 6px 4px -2px, rgba(0,0,0,.6) 0 4px 4px 1px; 

-webkit-transition: -webkit-transform .2s cubic-bezier(0,.5,0,1), -webkit-border-radius 1s cubic-bezier(0,.5,0,1);
-moz-transition: -moz-transform .2s cubic-bezier(0,.5,0,1), -moz-border-radius 1s cubic-bezier(0,.5,0,1);
-ms-transition: -ms-transform .2s cubic-bezier(0,.5,0,1), -ms-border-radius 1s cubic-bezier(0,.5,0,1);
-o-transition: -o-transform .2s cubic-bezier(0,.5,0,1), -o-border-radius 1s cubic-bezier(0,.5,0,1);
transition: transform .2s cubic-bezier(0,.5,0,1), border-radius 1s cubic-bezier(0,.5,0,1);
}


#zen .button:active, #zen.play .button:active {
-webkit-transform: scale(.5); 
-moz-transform: scale(.5);  
-ms-transform: scale(.5); 
-o-transform: scale(.5);  
transform: scale(.5); 
}
#zen.play .button {
border-radius: 30px;
-webkit-transform: scale(.54);
-moz-transform: scale(.54);
-ms-transform: scale(.54);
-o-transform: scale(.54);
transform: scale(.54);  
}








/* icon */

#zen .button .icon {
position: absolute;
display: inline-block;
top: 0;
width: 100px;
height: 100px;
}
#zen .button .icon.play {
background: url(../img/play.png) no-repeat;

-webkit-transition: opacity 1s cubic-bezier(.5,.5,.5,1);  
-moz-transition: opacity 1s cubic-bezier(.5,.5,.5,1); 
-ms-transition: opacity 1s cubic-bezier(.5,.5,.5,1);  
-o-transition: opacity 1s cubic-bezier(.5,.5,.5,1); 
transition: opacity 1s cubic-bezier(.5,.5,.5,1);  
}
#zen.play .button .play {
opacity: 0;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}

#zen .button .icon.pause {
opacity: 0; 
background: url(../img/pause.png) no-repeat;
}
#zen.play .button .pause {
opacity: 1;
-webkit-transition: opacity 1s cubic-bezier(.5,.5,.5,1);  
-moz-transition: opacity 1s cubic-bezier(.5,.5,.5,1); 
-ms-transition: opacity 1s cubic-bezier(.5,.5,.5,1);  
-o-transition: opacity 1s cubic-bezier(.5,.5,.5,1); 
transition: opacity 1s cubic-bezier(.5,.5,.5,1);  
}



/* drag */

#zen .drag {
display: block;
position: absolute;
width: 100px;
height: 100px;
}



/* buffer */

#zen .buffer {
display: block;
position: absolute;
width: 100px;
height: 100px;
background: url(../img/buffer.png) no-repeat;
}
#zen .buffer.loaded {
opacity: 0;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s; 
-ms-transition: opacity .5s;  
-o-transition: opacity .5s; 
transition: opacity .5s;
}

/* progress */

#zen .progress {
display: block;
position: absolute;
width: 100px;
height: 100px;
background: url(../img/progress.png) no-repeat;
opacity: .85;
box-shadow: none;
margin-bottom: 0;
border-radius: 0;
}






/* circle */

#zen .circle {
display: block;
position: absolute;
width: 98px;
height: 98px;
margin: 1px;
border-radius: 50px;

background: url(../img/circle-still.png); /* fallback */
background: url(../img/circle.png) no-repeat, -webkit-gradient(radial, center center, 35, center center, 15, from(hsla(200,100%,0%,0)), to(hsla(200,100%,0%,1)));
background: url(../img/circle.png) no-repeat, -webkit-radial-gradient(50% 50%, hsla(200,100%,0%,1), hsla(200,100%,0%,1), hsla(200,100%,0%,0) 50%);
background: url(../img/circle.png) no-repeat, -moz-radial-gradient(50% 50%, hsla(200,100%,0%,1), hsla(200,100%,0%,1), hsla(200,100%,0%,0) 50%);
background: url(../img/circle.png) no-repeat, -o-radial-gradient(50% 50%, hsla(200,100%,0%,1), hsla(200,100%,0%,1), hsla(200,100%,0%,0) 50%);
background: url(../img/circle.png) no-repeat, radial-gradient(50% 50%, hsla(200,100%,0%,1), hsla(200,100%,0%,1), hsla(200,100%,0%,0) 50%);

background-color: hsl(100,100%,60%);

-webkit-box-shadow: inset rgba(0,0,0,.5) 0 0 5px 3px;
box-shadow: inset rgba(0,0,0,.5) 0 0 5px 3px;

-webkit-transform: scale(.7) rotate(-180deg);
-moz-transform: scale(.7) rotate(-180deg);
-ms-transform: scale(.7) rotate(-180deg);
-o-transform: scale(.7) rotate(-180deg);
transform: scale(.7) rotate(-180deg);

-webkit-transition: all .5s ease-in;  
-moz-transition: all .5s ease-in; 
-ms-transition: all .5s ease-in;  
-o-transition: all .5s ease-in; 
transition: all .5s ease-in;  
}


#zen.play .circle {
background-color: hsl(200,100%,60%);  

-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);

-webkit-transition: -webkit-transform 1s cubic-bezier(0,.5,0,1), background-color .6s linear;
-moz-transition: -moz-transform 1s cubic-bezier(0,.5,0,1), background-color .6s linear;
-ms-transition: -ms-transform 1s cubic-bezier(0,.5,0,1), background-color .6s linear;
-o-transition: -o-transform 1s cubic-bezier(0,.5,0,1), background-color .6s linear;
transition: transform 1s cubic-bezier(0,.5,0,1), background-color .6s linear;

-webkit-animation: rotate 20s linear infinite 1s;
-moz-animation: rotate 20s linear infinite 1s;
-ms-animation: rotate 20s linear infinite 1s;
-o-animation: rotate 20s linear infinite 1s;
animation: rotate 20s linear infinite 1s; 
}


#zen.play .circle.rotate {
-webkit-animation: rotate 20s linear infinite;
-moz-animation: rotate 20s linear infinite;
-ms-animation: rotate 20s linear infinite;
-o-animation: rotate 20s linear infinite;
animation: rotate 20s linear infinite;  
}

@-webkit-keyframes rotate {
0% { -webkit-transform: rotate( 0deg); }
100% { -webkit-transform: rotate(-360deg); }
}

@-moz-keyframes rotate {
0% { -moz-transform: rotate( 0deg); }
100% { -moz-transform: rotate(-360deg); }
}

@-ms-keyframes rotate {
0% { -ms-transform: rotate( 0deg); }
100% { -ms-transform: rotate(-360deg); }
}

@-o-keyframes rotate {
0% { -o-transform: rotate( 0deg); }
100% { -o-transform: rotate(-360deg); }
}

@keyframes rotate {
0% { transform: rotate( 0deg); }
100% { transform: rotate(-360deg); }
}